<!--  -->
<template>
  <div>
      <backHeader title='修改账户密码'></backHeader>
      <div class="change-pwd-item">
          <span class="change-pwd-title">旧密码</span>
          <input type="password" class="change-pwd-input" placeholder="请输入旧密码">
      </div>
      <div class="change-pwd-item">
          <span class="change-pwd-title">新密码</span>
          <input type="password" class="change-pwd-input" placeholder="字母数字组成的6-12个字符">
      </div>
      <div class="change-pwd-item">
          <span class="change-pwd-title">新密码</span>
          <input type="password" class="change-pwd-input" placeholder="再次确定新密码">
      </div>
      <div class="change-pwd-item">
          <span class="change-pwd-title">验证码</span>
          <input class="change-pwd-input" placeholder="输入图中的验证码">
          <img class="change-pwd-view" src="~images/icon/yanzhengma.png">
    </div>
    <div class='my-button' @click='submit'>确认修改</div>
  </div>
</template>

<script>
import backHeader from '../../components/backHeader'
export default {
  props: [],
  components: {
    backHeader
  },
  data () {
    return {
      oldPassword: '',
      newPassword: '',
      identify: ''
    }
  },
  computed: {},
  methods: {
    submit () {
      if (!this.oldPassword || !this.newPassword || !this.identify) {
        this.$toast('信息不能为空')
      }
    }
  }
}

</script>
<style lang='less' scoped>
.change-pwd-item {
    width: 100%;
    overflow: hidden;
    height: 64px;
    background-color: #fff;
    font-size: 15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 16px;
}
.change-pwd-item .change-pwd-title {
    white-space: nowrap;
    color: #661dac;
    margin-right: 20px;
}
.change-pwd-item .change-pwd-input {
    font-size: 15px;
    color: #000;
    width: 182px;
    height: 22px;
    border: none;
    outline: none;
}
</style>
